<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          批次号：<a-input :maxLength="128" style="width: 60%" v-model="searchData.bachNo" />
        </a-col>
        <a-col :span="6">
          入库仓库：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehouseId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <a-button
            type="primary"
            class="searchBtn"
            @click="
              () => {
                getBatchTableList();
              }
            "
          >
            查询
          </a-button>
          <a-button
            style="margin: 0 10px"
            type="primary"
            class="searchBtn"
            @click="resetSearch"
          >
            重置
          </a-button>
        </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs type="card" @change="callback">
        <a-tab-pane key="2" tab="分单中" style="padding: 0 10px">
          <BatchManageTable
            v-if="searchData.batchState === '2'"
            :batchTableData="batchTableData"
            :batchState="searchData.batchState"
            :getBatchTableList="getBatchTableList"
          />
        </a-tab-pane>
        <a-tab-pane key="12" tab="拣货中" style="padding: 0 10px">
          <BatchManageTable
            v-if="searchData.batchState === '12'"
            :batchTableData="batchTableData"
            :batchState="searchData.batchState"
            :getBatchTableList="getBatchTableList"
          />
        </a-tab-pane>
        <a-tab-pane key="22" tab="待打单" style="padding: 0 10px">
          <BatchManageTable
            v-if="searchData.batchState === '22'"
            :batchTableData="batchTableData"
            :batchState="searchData.batchState"
            :getBatchTableList="getBatchTableList"
          />
        </a-tab-pane>
        <a-tab-pane key="32" tab="已操作" style="padding: 0 10px">
          <BatchManageTable
            v-if="searchData.batchState === '32'"
            :batchTableData="batchTableData"
            :batchState="searchData.batchState"
            :getBatchTableList="getBatchTableList"
          />
        </a-tab-pane>
        <a-tab-pane key="42" tab="已交运" style="padding: 0 10px">
          <BatchManageTable
            v-if="searchData.batchState === '42'"
            :batchTableData="batchTableData"
            :batchState="searchData.batchState"
            :getBatchTableList="getBatchTableList"
          />
        </a-tab-pane>
        <a-tab-pane key="52" tab="已发货" style="padding: 0 10px">
          <BatchManageTable
            v-if="searchData.batchState === '52'"
            :batchTableData="batchTableData"
            :batchState="searchData.batchState"
            :getBatchTableList="getBatchTableList"
          />
        </a-tab-pane>
        <a-button
          @click="visible = true"
          style="
            background: #66b1ff;
            color: #fff;
            border: none;
            margin-right: 20px;
          "
          slot="tabBarExtraContent"
        >
          新建批次
        </a-button>
      </a-tabs>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider :locale="locale">
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <!-- //模态框 -->
    <BatchManageModal
      :searchData="searchData"
      :getBatchTableList="getBatchTableList"
      :batchState="searchData.batchState"
    />
    <!-- 新建批次模态框 -->
    <a-modal
      v-model="visible"
      title="新建批次"
      @ok="handleOk"
      cancelText="取消"
      okText="确定"
      :maskClosable="false"
      :confirm-loading="confirmLoading"
    >
      <div class="add-batch">
        <p>
          仓库：
          <a-select
            show-search
            option-filter-prop="children"
            style="width: 15rem"
            :filter-option="filterOption"
            @change="handleChangeWarehouse"
            v-model="addBatch.warehouseName"
          >
            <a-select-option
              :value="item.titleName"
              v-for="item in warehouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </p>
        <p>
          批次名称：<a-input
          :maxLength="128"
            style="width: auto; width: 15rem"
            v-model="addBatch.bachName"
          />
        </p>
        <p>
          备注：<a-textarea
          :maxLength="256"
            style="width: auto; width: 15rem"
            auto-size
            v-model="addBatch.remark"
          />
        </p>
      </div>
    </a-modal>
  </div>
</template>

<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import {
  OutBound_batchManage,
  OutBound_addBatch,
} from "@/apis/system/WM/OutOrder";
import BatchManageTable from "@/components/system/OutOrder/BatchManageTable.vue";
import BatchManageModal from "@/components/system/OutOrder/BatchManageModal.vue";
export default {
  props: ["warehouse", "getOutBatchList"],
  components: {
    BatchManageTable,
    BatchManageModal,
  },
  created() {
    this.getBatchTableList();
  },
  data() {
    return {
      spinning: false,
      tabKey: "2",
      expand: false,
      batchTableData: [],
      total: 10,
      searchData: {
        batchState: "2",
        current: 1,
        size: 10,
        bachNo: null,
        warehouseId: null,
      },
      locale,
      visible: false,
      confirmLoading: false,
      // 新增批次
      addBatch: {
        bachName: "",
        warehouseId: "",
        warehouseName: "",
        remark: "",
      },
    };
  },
  methods: {
    // //重置按钮
    resetSearch() {
      this.searchData = {
        batchState: this.tabKey,
        current: 1,
        size: 10,
        bachNo: null,
        warehouseId: null,
      };
      this.getBatchTableList();
    },
    handleChangeWarehouse(value, option) {
      this.addBatch.warehouseId = option.key;
      this.addBatch.warehouseName = value;
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //新建批次
    handleOk() {
      this.confirmLoading = true;
      setTimeout(async () => {
        let { code } = await OutBound_addBatch(this.addBatch);
        if (code === "10000") {
          this.visible = false;
          this.getOutBatchList();
          this.confirmLoading = false;
          for (let key in this.addBatch) {
            this.addBatch[key] = null;
          }
          this.getBatchTableList();
        } else {
          this.confirmLoading = false;
        }
      }, 1000);
      // this.visible = false;
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getBatchTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getBatchTableList();
    },
    callback(key) {
      this.searchData.current = 1;
      this.searchData.batchState = key;
      this.tabKey = key;
      this.getBatchTableList();
    },
    //获取批次列表
    async getBatchTableList() {
      this.spinning = true;
      let { code, responseBody } = await OutBound_batchManage(this.searchData);
      if (code === "200") {
        this.total = responseBody.total * 1;
        responseBody.records.forEach((item, i) => {
          item.IDX = i + this.searchData.current * this.searchData.size - 9;
          item.key = item.id;
          item.createTime = item.createTime
            ? item.createTime.replace("T", "  ")
            : "";
        });
        this.batchTableData = responseBody.records;
        this.spinning = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.add-batch {
  width: 68%;
  margin: 0 auto;
  text-align: right;
}
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
</style>